<template>
  <div class="adivice-info">
    <!-- 顶栏 -->
    <div class="search-content">
      <Col class="panel content-header" :span="24">
      <div class="title-bar cf">
        <h5 class="fl">
          <span>
            <a href="javascript:void(0);" class="link" @click="backToCompany">
              <i class="fa fa-angle-left" aria-hidden="true"></i>返回上一页</a>
            <span class="dashboard-card-sep">|</span>
            <span class="dashboard-card-name"><span>设备详情</span></span>
          </span>
        </h5>
        <Breadcrumb>
          <BreadcrumbItem to="/temperature/device">温湿度</BreadcrumbItem>
          <BreadcrumbItem to="/temperature/device">设备管理</BreadcrumbItem>
          <BreadcrumbItem>设备详情</BreadcrumbItem>
        </Breadcrumb>
      </div>
      </Col>
    </div>
    <!-- 内容栏 -->
    <Col class="panel tab-panel adevice-tab-panel" style="height:calc(100% - 42px);" :span="24">
    <Tabs style="height: 100%;" :animated="false" :value="tabCurrentName" @on-click="tabBeClick">
      <TabPane label="设备信息" name="zero" style="height:100%;">
        <transition name="scale-transverse">
          <DeviceDetailContentTab :id="id" v-if="tabCurrentName==='zero'" />
        </transition>
      </TabPane>
      <TabPane label="数据详情" name="first" style="height:100%;">
        <transition name="scale-transverse">
          <detailTab :id="id" v-if="tabCurrentName==='first'" />
        </transition>
      </TabPane>
      <TabPane label="报警设置" name="second" style="height:100%;">
        <transition name="scale-transverse">
          <alarmTab :id="id" v-if="tabCurrentName==='second'" />
        </transition>
      </TabPane>
    </Tabs>
    </Col>
  </div>
</template>
<script>
import detailTab from "./detailTab";
import alarmTab from "./alarmTab";
import DeviceDetailContentTab from "./DeviceDetailContentTab";
export default {
  components: {
    detailTab,
    alarmTab,
    DeviceDetailContentTab
  },

  created() {
    this.id = this.$route.params.id;
  },

  beforeRouteUpdate(to, from, next) {
    next(vm => {
      vm.id = vm.$route.params.id;
    });
  },

  data() {
    return {
      tabCurrentName: "zero",
      selectRow: {},
      id: null
    };
  },

  methods: {
    // 返回前一页
    backToCompany() {
      this.$router.push("/temperature/device");
    },

    // 获取数据
    getInitialState() {
      const vm = this;
    },

    tabBeClick(name) {
      this.tabCurrentName = name;
    }
  }
};
</script>
